<template>
	<view class="container">
		<view class="layer">
			<view class="address" @click="clickRadio(0)">
				<view class="radio">
					<image v-show="index !== 0" src="../../static/langwen/radio.png" mode=""></image>
					<image v-show="index === 0" src="../../static/langwen/checked.png" mode=""></image>
				</view>
				<view class="user">
					<view class="user-header">
						<text class="user-name">张某某</text>
						<text>13822374299</text>
						<text class="def-sign">默认</text>
					</view>
					<view class="user-body">
						测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试
					</view>
				</view>
			</view>
		</view>
		<view class="layer">
			<view class="address" @click="clickRadio(1)">
				<view class="radio">
					<image v-show="index !== 1" src="../../static/langwen/radio.png" mode=""></image>
					<image v-show="index === 1" src="../../static/langwen/checked.png" mode=""></image>
				</view>
				<view class="user">
					<view class="user-header">
						<text class="user-name">张某某</text>
						<text>13822374299</text>
						<text class="def-sign">默认</text>
					</view>
					<view class="user-body">
						测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试
					</view>
				</view>
			</view>
		</view>
		<view class="layer">
			<view class="address" @click="clickRadio(2)">
				<view class="radio">
					<image v-show="index !== 2" src="../../static/langwen/radio.png" mode=""></image>
					<image v-show="index === 2" src="../../static/langwen/checked.png" mode=""></image>
				</view>
				<view class="user">
					<view class="user-header">
						<text class="user-name">张某某</text>
						<text>13822374299</text>
						<text class="def-sign">默认</text>
					</view>
					<view class="user-body">
						测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试
					</view>
				</view>
			</view>
		</view>
		<view class="btn" @click="toEdit">新建地址</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			index: 0
		}
	},
	methods: {
		clickRadio(index) {
			this.index = index;
		},
		toEdit() {
			uni.navigateTo({
				url: '/pages/langwen/editAddress'
			})
		}
	},
	onNavigationBarButtonTap() {
		uni.navigateTo({
			url: '/pages/langwen/editAddress'
		})
	}
}
</script>

<style lang="less">
page {
	background:rgba(245,245,245,1);
}

.container {
	padding: 0 15px;
}

.layer {
	padding: 15px;
	margin: 10px 0;
	background:rgba(255,255,255,1);
	box-shadow:0px 1px 8px 0px rgba(0,0,0,0.02);
	border-radius:8px;
}

.radio {
	width: 22px;
	height: 22px;
	min-width: 22px;
	margin-right: 15px;
}

.btn {
	display: flex;
	justify-content: center;
	align-items: center;
	height:44px;
	margin-top: 20px;
	background:rgba(90,194,255,1);
	border-radius:100px;
	font-size:16px;
	font-weight:500;
	color:rgba(255,255,255,1);
}

.address {
	display: flex;
	align-items: center;
	.user {
		flex-grow: 1;
		.user-header {
			font-size:14px;
			font-weight:400;
			color:rgba(161,165,177,1);
			.user-name {
				font-size:14px;
				font-weight:400;
				color:rgba(63,64,70,1);
				margin-right: 10px;
			}
			.def-sign {
				display: inline-block;
				width:39px;
				height:15px;
				background: #FD9B43;
				text-align: center;
				line-height: 15px;
				font-size: 12px;
				color: #fff;
				margin-left: 18px;
				font-style: italic;
			}
		}
		.user-body {
			margin-top: 5px;
			font-size:14px;
			font-weight:400;
			color:rgba(127,129,141,1);
			line-height:20px;
		}
	}
}
</style>
